<template>
  <div class="container">
    <header>
      <h1> 企业供需Ai对接平台</h1>
      <p>精准匹配企业需求与资源，构建高效商业合作桥梁</p>
    </header>
    <div class="form-container">
      <div class="form-notice">
        请根据您的实际情况填写以下信息，带 <span style="color:#e74c3c">*</span> 为必填项。信息越详细，匹配越精准！
      </div>
      <form @submit.prevent="handleSubmit" @reset="handleReset" ref="formRef">
        <!-- 基础企业信息 -->
        <div class="form-section">
          <h2> 基础企业信息</h2>
          <div class="form-row">
            <div class="form-group" style="position:relative;min-width:260px;">
              <label class="required">企业名称</label>
              <div style="display:flex;align-items:center;gap:8px;">
                <input v-model="form.companyName" type="text" required @input="companySearchKeyword=form.companyName;showCompanyDropdown=false" placeholder="请输入企业名称" style="flex:1;" />
                <button type="button" class="btn btn-query" style="padding:4px 12px;" @click="searchCompany" :disabled="companySearchLoading">{{ companySearchLoading ? '查询中...' : '查询工商信息' }}</button>
              </div>
              <!-- 下拉选择企业 -->
              <ul v-if="showCompanyDropdown && companySearchList.length" class="company-dropdown">
                <li v-for="item in companySearchList" :key="item.key || item.id || item.entName" @click="handleSelectCompany(item)">
                  {{ item.entName || item.name }}
                  <span v-if="item.creditCode" style="color:#888;font-size:12px;">({{ item.creditCode }})</span>
                </li>
              </ul>
            </div>
            <div class="form-group">
              <label class="required">统一社会信用代码</label>
              <input v-model="form.companyCode" type="text" required />
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="required">企业注册地址</label>
              <input v-model="form.registerAddress" type="text" required />
            </div>
            <div class="form-group">
              <label>主要经营地址</label>
              <input v-model="form.businessAddress" type="text" />
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="required">所属行业</label>
              <select v-model="form.industry" required>
                <option value="">-- 请选择行业 --</option>
                <option value="manufacture">制造业</option>
                <option value="it">信息技术</option>
                <option value="finance">金融业</option>
                <option value="retail">零售业</option>
                <option value="healthcare">医疗健康</option>
                <option value="education">教育培训</option>
                <option value="logistics">物流运输</option>
                <option value="realestate">房地产</option>
                <option value="other">其他行业</option>
              </select>
            </div>
            <div class="form-group">
              <label class="required">企业规模</label>
              <div class="radio-group">
                <div class="radio-item">
                  <input type="radio" id="size-small" value="small" v-model="form.companySize" required />
                  <label for="size-small">初创企业 (&lt;20人)</label>
                </div>
                <div class="radio-item">
                  <input type="radio" id="size-medium" value="medium" v-model="form.companySize" />
                  <label for="size-medium">中小企业 (20-300人)</label>
                </div>
                <div class="radio-item">
                  <input type="radio" id="size-large" value="large" v-model="form.companySize" />
                  <label for="size-large">大型企业 (&gt;300人)</label>
                </div>
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="required">联系人姓名</label>
              <input v-model="form.contactName" type="text" required />
            </div>
            <div class="form-group">
              <label class="required">联系人职务</label>
              <input v-model="form.contactPosition" type="text" required />
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="required">联系电话</label>
              <input v-model="form.contactPhone" type="tel" required />
            </div>
            <div class="form-group">
              <label class="required">电子邮箱</label>
              <input v-model="form.contactEmail" type="email" required />
            </div>
          </div>
          <div class="form-row">
            <div class="form-group full-width">
              <label>企业官网/主要产品介绍链接</label>
              <input v-model="form.companyWebsite" type="text" />
            </div>
          </div>
        </div>
        <!-- 核心需求/供应信息类型 -->
        <div class="form-section">
          <h2>核心需求/供应信息类型</h2>
          <div class="info-type-selector">
            <div class="type-card" :class="{selected: form.infoType==='demand'}" @click="selectInfoType('demand')">
              <h3>我有需求</h3>
              <p>寻求资源、服务或合作</p>
            </div>
            <div class="type-card" :class="{selected: form.infoType==='supply'}" @click="selectInfoType('supply')">
              <h3>我有供应</h3>
              <p>提供资源、服务或合作</p>
            </div>
          </div>
          <input type="hidden" v-model="form.infoType" />
          <!-- 需求方信息 -->
          <div class="toggle-section" v-show="form.infoType==='demand'">
            <h3> 需求方信息</h3>
            <div class="form-row">
              <div class="form-group full-width">
                <label class="required">需求类别</label>
                <div class="checkbox-group">
                  <div class="checkbox-item" v-for="item in demandTypeOptions" :key="item.value">
                    <input type="checkbox" :id="'demand-type-'+item.value" :value="item.value" v-model="form.demandType" />
                    <label :for="'demand-type-'+item.value">{{item.label}}</label>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group full-width">
                <label class="required">需求描述</label>
                <textarea v-model="form.demandDescription" placeholder="请清晰描述所需物品、服务或合作的具体内容，例如：采购XX型号芯片、寻求长三角地区代工厂、招聘AI算法工程师、需要1000平米仓储空间等"></textarea>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>期望合作模式</label>
                <input v-model="form.demandCooperation" placeholder="如：长期采购、项目合作等" />
              </div>
              <div class="form-group">
                <label>预算范围/可接受价格</label>
                <input v-model="form.demandBudget" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>需求紧迫性</label>
                <select v-model="form.demandUrgency">
                  <option value="">-- 请选择 --</option>
                  <option value="urgent">非常紧急</option>
                  <option value="high">紧急</option>
                  <option value="medium">一般</option>
                  <option value="low">长期需求</option>
                </select>
              </div>
              <div class="form-group">
                <label>期望合作地域</label>
                <input v-model="form.demandRegion" placeholder="如：不限、本地、长三角等" />
              </div>
            </div>
          </div>
          <!-- 供应方信息 -->
          <div class="toggle-section" v-show="form.infoType==='supply'">
            <h3> 供应方信息</h3>
            <div class="form-row">
              <div class="form-group full-width">
                <label class="required">供应/服务类别</label>
                <div class="checkbox-group">
                  <div class="checkbox-item" v-for="item in supplyTypeOptions" :key="item.value">
                    <input type="checkbox" :id="'supply-type-'+item.value" :value="item.value" v-model="form.supplyType" />
                    <label :for="'supply-type-'+item.value">{{item.label}}</label>
                  </div>
                </div>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group full-width">
                <label class="required">核心产品/服务/能力描述</label>
                <textarea v-model="form.supplyDescription" placeholder="请清晰描述您的产品或服务名称、核心技术、独特优势等"></textarea>
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label class="required">主要优势/核心竞争力</label>
                <textarea v-model="form.supplyAdvantage" placeholder="简述与同行相比的突出优势"></textarea>
              </div>
              <div class="form-group">
                <label>可接受的合作模式</label>
                <input v-model="form.supplyCooperation" placeholder="如：直销、经销、项目合作等" />
              </div>
            </div>
            <div class="form-row">
              <div class="form-group">
                <label>定价参考/报价依据</label>
                <input v-model="form.supplyPrice" />
              </div>
              <div class="form-group">
                <label>可服务地域</label>
                <input v-model="form.supplyRegion" placeholder="如：全国、特定区域等" />
              </div>
            </div>
          </div>
        </div>
        <!-- 附加信息与合作偏好 -->
        <div class="form-section">
          <h2> 附加信息与合作偏好</h2>
          <div class="form-row">
            <div class="form-group full-width">
              <label>期望匹配的企业类型/规模</label>
              <input v-model="form.preferCompany" placeholder="如：优先考虑行业龙头、初创科技公司、本地企业等" />
            </div>
          </div>
          <div class="form-row">
            <div class="form-group full-width">
              <label>其他特殊要求或说明</label>
              <textarea v-model="form.additionalInfo"></textarea>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label>信息有效期至</label>
              <input type="date" v-model="form.expiryDate" />
            </div>
            <div class="form-group">
              <label>信息接收方式</label>
              <div class="checkbox-group">
                <div class="checkbox-item">
                  <input type="checkbox" id="receive-email" value="email" v-model="form.receiveMethod" />
                  <label for="receive-email">邮件</label>
                </div>
                <div class="checkbox-item">
                  <input type="checkbox" id="receive-phone" value="phone" v-model="form.receiveMethod" />
                  <label for="receive-phone">电话</label>
                </div>
                <div class="checkbox-item">
                  <input type="checkbox" id="receive-sms" value="sms" v-model="form.receiveMethod" />
                  <label for="receive-sms">短信</label>
                </div>
                <div class="checkbox-item">
                  <input type="checkbox" id="receive-platform" value="platform" v-model="form.receiveMethod" />
                  <label for="receive-platform">平台消息</label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 声明与授权 -->
        <div class="form-section">
          <h2> 声明与授权</h2>
          <div class="declaration">
            <div class="declaration-item">
              <input type="checkbox" id="declaration1" v-model="form.declaration1" required />
              <label for="declaration1">我确认以上所填写信息真实、准确、完整。</label>
            </div>
            <div class="declaration-item">
              <input type="checkbox" id="declaration2" v-model="form.declaration2" required />
              <label for="declaration2">我理解并同意，平台/机构可将本表信息用于供求匹配、市场分析及推送相关商业机会之目的。</label>
            </div>
            <div class="declaration-item">
              <input type="checkbox" id="declaration3" v-model="form.declaration3" required />
              <label for="declaration3">我授权平台/机构在匹配过程中，将必要的信息（隐去敏感商业细节）提供给潜在的匹配方进行初步沟通。</label>
            </div>
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="required">提交日期</label>
              <input type="date" v-model="form.submitDate" required />
            </div>
          </div>
        </div>
        <div class="button-group">
          <button type="reset" class="btn btn-reset">重置表单</button>
          <button type="button" class="btn btn-submit" @click="handleSubmitAndReply" :disabled="loadingZhipu">{{ loadingZhipu ? '提交并智能分析中...' : '提交并回复' }}</button>
        </div>
      </form>
    </div>
    <!-- AI智能回复弹窗 -->
    <div v-if="showZhipuModal" class="zhipu-modal-overlay" @click.self="showZhipuModal=false">
      <div class="zhipu-modal-container">
        <div class="zhipu-modal-header">
          <h3> AI智能回复</h3>
          <button class="zhipu-modal-close" @click="showZhipuModal=false">×</button>
        </div>
        <div v-if="loadingZhipu" class="zhipu-modal-content loading-content">
          <div class="loading-spinner">
            <div class="spinner"></div>
            <p>AI正在分析企业信息，请稍候...</p>
          </div>
        </div>
        <div v-else class="zhipu-modal-content">
          <div class="zhipu-content-text" style="white-space: pre-line; color: #222; font-size: 16px;" v-html="zhipuReply"></div>
          <div class="zhipu-content-footer">
            <button class="copy-btn" @click="copyZhipuReply" :disabled="!zhipuReply">
              <span v-if="copySuccess" class="copy-success">✓ 已复制</span>
              <span v-else>📋 复制回复</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <p>© 2023 企业供需Ai对接平台 | 打造高效商业对接桥梁</p>
      <p>提交的信息将受到严格保护，仅用于商业匹配用途</p>
    </footer>
    <div v-if="popup.visible" class="popup-overlay" @click.self="closePopup">
      <div class="popup-container">
        <div class="popup-header">
          <i :class="popup.iconClass" class="popup-icon"></i>
          <div class="popup-title">{{ popup.title }}</div>
        </div>
        <div class="popup-content">{{ popup.message }}</div>
        <div class="popup-footer">
          <button class="popup-btn" :class="popup.btnClass" @click="closePopup">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import scriptObj from './EnterpriseForm.script.js';
export default scriptObj;
</script>

<style scoped>
@import './EnterpriseForm.css';
.company-dropdown {
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  z-index: 10;
  background: #fff;
  border: 1px solid #eee;
  max-height: 220px;
  overflow-y: auto;
  margin: 0; padding: 0;
  list-style: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.company-dropdown li {
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.company-dropdown li:hover {
  background: #f5f7fa;
}
.zhipu-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.25);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zhipu-modal-container {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
  max-width: 600px;
  width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  padding: 0 0 18px 0;
  animation: modalFadeIn 0.35s cubic-bezier(.4,0,.2,1);
}
.zhipu-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 8px 24px;
  border-bottom: 1px solid #f0f0f0;
}
.zhipu-modal-close {
  background: none;
  border: none;
  font-size: 28px;
  color: #888;
  cursor: pointer;
  line-height: 1;
  padding: 0 6px;
  transition: color 0.2s;
}
.zhipu-modal-close:hover {
  color: #e74c3c;
}
.zhipu-modal-content {
  padding: 18px 24px 0 24px;
}
@keyframes modalFadeIn {
  from { transform: translateY(40px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}
</style>
